<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html{
            font-size:16px;
        }

        ul>li>section>.message{
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            margin-left: 10px;
            margin-right: 60px;
        }
        ul>li>section>.message>.name{
            font-weight: 500;
            padding-top: 15px;
            padding-bottom: 5px;
        }
        ul>li>section>.message>.last-message,ul>li>section>.time{
            font-size: 0.75rem;
            color: #a1a1a1;
            padding-bottom: 15px;
            width: 100px;
        }
        ul>li>section>.time{
            width: 100px;
            border-bottom: none;
            padding-left: 35px;
            padding-top: 14px;
        }
    </style>
    <link href="../css/base.css" rel="stylesheet">
</head>
<body>
<div>
    <header>
        <p class="title">微信</p>
        <div class="icon">
            <img width="21" height="21" src="../img/img_weixin/search.svg">
            <img width="21" height="21" style="margin-left: 10px" src="../img/img_weixin/add.svg">
        </div>
    </header>
    <div class="message">
        <ul>
            <li>
                <img height="40" width="40" src="../img/img_weixin/touxiang1.jpg">
                <section>
                    <section class="message">
                        <p class="name">小李</p>
                        <p class="last-message">吃了嘛？</p>
                    </section>
                    <section class="time" >
                        5:21
                    </section>
                </section>
            </li>
            <li>
                <img height="40" width="40" src="../img/img_weixin/touxiang1.jpg">
                <section>
                    <section class="message">
                        <p class="name">小李</p>
                        <p class="last-message">我要吃烧烤</p>
                    </section>
                    <section class="time" >
                        5:21
                    </section>
                </section>
            </li>
            <li>
                <img height="40" width="40" src="../img/img_weixin/touxiang1.jpg">
                <section>
                    <section class="message">
                        <p class="name">小李</p>
                        <p class="last-message">我要吃榴莲</p>
                    </section>
                    <section class="time" >
                        5:21
                    </section>
                </section>
            </li>
            <li>
                <img height="40" width="40" src="../img/img_weixin/touxiang1.jpg">
                <section>
                    <section class="message">
                        <p class="name">小李</p>
                        <p class="last-message">我要吃小蛋糕</p>
                    </section>
                    <section class="time" >
                        5:21
                    </section>
                </section>
            </li>
        </ul>
    </div>

</div>
</body>
</html>